<template>
	<div>
		<el-form :model="modify" label-width="120px">
			<el-form-item label="用户昵称">
				<el-input v-model="modify.nickname" />
			</el-form-item>
			<el-form-item label="密码：">
				<el-input v-model="modify.pwd" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">修改</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex';
import { RootState } from '@/store'
import { computed, reactive } from '@vue/reactivity';
import request from '@/utils/request'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
const store = useStore<RootState>()
const router = useRouter()
const user = computed(() => store.state.user)


const modify = reactive({
	nickname: user.value.nickname,
	pwd: '',
	token: localStorage.getItem('token') || user.value.token
})

const onSubmit = () => {
	modify.token = 'asdasdzsdSdada'
	request.post('/api/user/modify', modify).then(resp => {
		const { token, nickname } = resp.data
		store.commit('SET_USER', { isLogin: true, token, nickname })
	}).catch((error) => {
			
			store.commit('SET_USER', { isLogin: false, token: '', nickname: '' })
			localStorage.removeItem('token');
			router.push({ name: 'login' });

	})
}
</script>